<template>
	<view>
		<view class="charts-box" style="height: 400px;">
			<qiun-data-charts type="mix" :opts="opts" :chartData="Mix" />
		</view>
		<view class="">
			<qiun-data-charts type="column" :opts="opts2" :chartData="Column" />
		</view>
		<view class="">
			<quin-data-charts type="pie" :chartData="pieData"></quin-data-charts>
		</view>
		<view class="">
			<quin-data-charts type="column" :chartData="columnData"></quin-data-charts>
		</view>
	</view>
</template>

<script>
	import quinDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			quinDataCharts
		},
		data() {
			return {
				opts: {
					yAxis: {
						data: [{
							position: 'left',
							title: '折线',
							min: 0,
							max: 15,
							format: 'yAxisDemo'
						}, {
							position: 'right',
							title: '柱状图',
							format: 'yAxisDemo'
						}]
					}
				},
				opts2: {
					extra: {
						column: {
							type: "stack"
						}
					},
					yAxis: {
						data: [{
							format: "yAxisDemo"
						}]
					}
				},

				Mix: {
					categories: ["2月", "3月", "4月"],
					series: [{
						name: "折线图",
						index: 0,
						data: [6, 10, 7],
						format: 'yAxisDemo',
						type: "line",
					}, {
						name: "柱状图",
						index: 1,
						data: [-21, 41, -39],
						type: "column",
						color: 'orange',
						format: 'yAxisDemo'
					}]
				},
				Column: {
					categories: ["2012年", "2022年", "2023年"],
					series: [{
						name: "中文",
						data: [14, 42, 15],
						format: "yAxisDemo"
					}, {
						name: "英文",
						data: [1, 39, 7],
						format: "yAxisDemo"
					}]
				},
				pieData: {
					series: [{
						name: '男生',
						data: 51
					}, {
						name: "女生",
						data: 49
					}]
				},
				columnData: {
					categories: ['优速快递', '工作人员态度恶劣', '天天快递', '快递被拆封'],
					series: [{
						name: '公司名称',
						data: [33, {
							"value": 10,
							"color": "#f04864"
						}, 31, {
							"value": 11,
							"color": "#f04864"
						}]
					}, {
						name: "投诉类型",
						data: [],
						color: "#f04864"
					}]
				}
			};
		}
	}
</script>

<style lang="scss">

</style>
